<template>
  <div id='order'>
    <!--内容头部  start-->
    <div class='breadcrumb-wrap'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>待处理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--内容头部  end-->
    <!--筛选条件 start-->
    <div class="condition-wrap">
      <el-form label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="提交时间">
              <el-date-picker type="date" placeholder="开始日期" v-model="queryVo.createTime" style="width:100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预约时间">
              <el-col>
                <el-date-picker type="date" placeholder="开始日期" v-model="queryVo.yyBeginTime" style="width:100%;">
                </el-date-picker>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input v-model="queryVo.telephoneNo" placeholder="请输入" icon="edit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单编号">
              <el-input v-model="queryVo.orderNo" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" :offset="22">
            <el-button type="primary" @click="handleadminStatus">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--筛选条件 end-->
    <div class='option-wrap'>
      <el-button type="primary" @click="dialogVisible.addOrderVisible = true"><i class="el-icon-plus"> </i> 新增订单
      </el-button>
    </div>
    <!--订单列表 start-->
    <div class="gird-wrap">
      <el-table :data="dataList" :border="true" height="600" style="width: 100%"
        :default-sort="{prop: 'createTime', order: 'descending'}">
        <el-table-column prop="createTime" label="创建时间" sortable default-sort="order:descending"> </el-table-column>
        <el-table-column prop="orderNo" label="订单编号" sortable> </el-table-column>
        <el-table-column prop="orderElement.customerName" label="客户信息" sortable> </el-table-column>
        <el-table-column prop="orderElement.telephoneNo" label="电话号码" sortable> </el-table-column>
        <el-table-column prop="modelName" label="机型" sortable></el-table-column>
        <el-table-column prop="price" label="预估总价" sortable> </el-table-column>
        <el-table-column prop="serviceName" label="预约信息" sortable> </el-table-column>
        <el-table-column label="操作" width="170" fixed="right">
          <template scope="scope">
            <el-button type="text" @click="showOrderDetail(scope.row)">详情</el-button>
            <el-button type="text" v-if="scope.row.isAlive === 'U'" @click="updateOrderStatus(scope.row, 'Y')">有效
            </el-button>
            <el-button type="text" v-if="scope.row.isAlive === 'U'" @click="updateOrderStatus(scope.row, 'U')">无效
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="dialogVisible.updateOrder.updateOrderVisible" :title="dialogVisible.updateOrder.title"
      size="tiny">
      <span>{{dialogVisible.updateOrder.tips}}</span>
      <el-select v-if="dialogVisible.updateOrder.showTextInput" v-model="dialogVisible.updateOrder.reason">
        <el-option v-for="item in dialogVisible.updateOrder.cancelList" :label="item.DEAD_REASON"
          :value="item.DEAD_CODE" :key="item"></el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.updateOrder.updateOrderVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible.updateOrder.action">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog v-model="dialogVisible.modifyOrderVisible" title="订单详情" size="large" top="%" :before-close="beforeModel">
      <modify-order :editinfo="editinfo" :modellist="modellist" :dataProvider="selectedRow" @saveup="updateOrder"
        @canle="canleOrder" @cancelreason="cancelRea"></modify-order>
    </el-dialog>

    <el-dialog title="新增订单" v-model="dialogVisible.addOrderVisible" size="large" :before-close="beforeClose">
      <add-order :editInfo="editInfo" :selected="selected" :faltArray="faltArray" @save="createOneOrder"
        @canleadd="canleadd"></add-order>
    </el-dialog>
  </div>

</template>
<script>
  import ModifyOrder from './order/OrderEditDetail'
  import AddOrder from './order/AddOrder'
  import r from '../utils/RequestUtil';
  export default {
    name: 'order_10',
    components: {
      ModifyOrder,
      AddOrder
    },
    data: function () {
      return {
        queryVo: {
          orderNo: null,
          pageSize: 10,
          pageNo: 1,
          engineerId: null,
          telephoneNo: null,
          serviceType: null,
          customerName: null,
          orderNo: null,
          fuzzyQuery: null,
          yyBeginTime: null,
          createTime: null,
          orderIdentifier: null,
          time: [],
          beginTime: null,
          endTime: null
        },
        dialogVisible: {
          addOrderVisible: false,
          modifyOrderVisible: false,
          updateOrder: {
            cancelList: [],
            updateOrderVisible: false,
            showTextInput: false,
            title: '',
            tips: '',
            reasonDesc: '',
            reason: null,
            action: () => {}
          }
        },
        dataList: [],
        totalcount: 0,
        brandmsglist: [],
        brandinfos: [],
        subFailure: [],
        maintypeAndsubtype: [],
        props: {
          value: "name",
          label: "name",
          children: "children"
        },
        failProps: {
          value: "value",
          label: "label",
          children: "children"
        },
        cityprops: {
          value: "provinceName",
          label: "provinceName",
          children: "children"
        },
        shopinfo: {},
        maincenter: {},
        orderFailureinfo: {},

        timestartandend: null,
        getposition: [],
        citylist: [],
        orderFailurelist: [],
        solution: null,
        selectedRow: null,
        orderIdentifierList: null,
        editInfo: {
          customerName: null,
          telephoneNo: null,
          address: null,
          orderIdentifier: null,
          price: null,
          solution: null,
          serviceType: null,
          date: null,
          startTime: null,
          endTime: null,
          remark: null,
          actualPrice: null,
          serviceRemark: null,
          wxsRemark: null
        },
        selected: {
          selectedCity: [],
          selectedDevice: [],
          selectedMainCenter: null,
          selectedShopInfo: null
        },
        faltArray: [{
          detid: 0
        }],
        editinfo: {
          dated: null,
          startTime: null,
          endTime: null,
          canlereason: null,
          serviceRemark: null,
          wxsRemark: null,
          customerName: null,
          telephoneNo: null,
          address: null
        },
        modellist: {
          faltArr: [],
          citys: [],
          brands: [],
          shopName: null,
          centerName: null,
          serviceType: null
        },
      }
    },
    methods: {
      beforeModel() {
        this.returnModelNull();
        this.dialogVisible.modifyOrderVisible = false;
      },
      returnModelNull() {
        this.editinfo.dated = null;
        this.editinfo.startTime = null;
        this.editinfo.endTime = null;
        this.editinfo.canlereason = null;
        this.editinfo.serviceRemark = null;
        this.editinfo.wxsRemark = null;
        this.editinfo.customerName = null;
        this.editinfo.telephoneNo = null;
        this.editinfo.address = null;

        this.modellist.faltArr = [];
        this.modellist.citys = [];
        this.modellist.brands = [];
        this.modellist.shopName = null;
        this.modellist.centerName = null;
        this.modellist.serviceType = null;

        this.engineerinfolist = new Array();
      },
      beforeClose() {
        this.returnNull();
        this.dialogVisible.addOrderVisible = false;
      },
      returnNull() {
        this.editInfo.customerName = null;
        this.editInfo.telephoneNo = null;
        this.editInfo.address = null;
        this.editInfo.orderIdentifier = null;
        this.editInfo.price = null;
        this.editInfo.solution = null;
        this.editInfo.serviceType = null;
        this.editInfo.date = null;
        this.editInfo.startTime = null;
        this.editInfo.endTime = null;
        this.editInfo.remark = null;
        this.editInfo.serviceRemark = null;
        this.editInfo.wxsRemark = null;
        this.editInfo.actualPrice = null;

        this.selected.selectedCity = [];
        this.selected.selectedDevice = [];
        this.selected.selectedMainCenter = null;
        this.selected.selectedShopInfo = null;
        this.faltArray = [{}];
      },
      canleOrder() {
        this.returnModelNull();
        this.dialogVisible.modifyOrderVisible = false;
      },
      canleadd() {
        this.dialogVisible.addOrderVisible = false;
        this.returnNull();
      },
      handleClose() {
        this.canleadd();
      },
      createOneOrder: function (data) {
        this.returnNull();
      },
      handleadminStatus: function () {
        this.queryVo.subFailure = this.comSubFailure;
        this.queryVo.brandName = this.comBrandName;
        this.queryVo.modelName = this.comModelName;
        if (this.queryVo.orderNo === "" || typeof this.queryVo.orderNo === "undefined") {
          this.queryVo.orderNo = null;
        }
        if (this.queryVo.telephoneNo === "" || typeof this.queryVo.telephoneNo === "undefined") {
          this.queryVo.telephoneNo = null;
        }
        if (this.queryVo.time !== "" || typeof this.queryVo.beginTime !== "undefined" || this.queryVo.time !== null) {
          this.queryVo.beginTime = this.queryVo.time[0];
          this.queryVo.endTime = this.queryVo.time[1];
        }
        if (this.queryVo.serviceType === "" || typeof this.queryVo.serviceType === "undefined") {
          this.queryVo.serviceType = null;
        }
        if (this.queryVo.fuzzyQuery === "" || typeof this.queryVo.fuzzyQuery === "undefined") {
          this.queryVo.fuzzyQuery = null;
        }
        if (this.queryVo.yyBeginTime === "" || typeof this.queryVo.yyBeginTime === "undefined") {
          this.queryVo.yyBeginTime = null;
        }
        if (this.queryVo.createTime === "" || typeof this.queryVo.createTime === "undefined") {
          this.queryVo.createTime = null;
        }
        if (this.queryVo.orderIdentifier === "" || typeof this.queryVo.orderIdentifier === "undefined") {
          this.queryVo.orderIdentifier = null;
        }
        if (this.queryVo.engineerId === "" || typeof this.queryVo.engineerId === "undefined") {
          this.queryVo.engineerId = null;
        }
      },

      handleSizeChange: function (val) {
        this.queryVo.pageSize = val;
        this.handleadminStatus();
      },
      handleCurrentChange: function (val) {
        this.queryVo.pageNo = val;
        this.handleadminStatus();
      },
      showOrderDetail: function (row) {
        this.selectedRow = row;
        this.dialogVisible.modifyOrderVisible = true;
      },
      updateOrderStatus: function (row, flag) {
        this.dialogVisible.updateOrder.updateOrderVisible = true;
        if ('Y' === flag) { // 有效
          this.dialogVisible.updateOrder.title = "确认订单";
          this.dialogVisible.updateOrder.tips = "确认该订单有效？";
          this.dialogVisible.updateOrder.showTextInput = false;
          this.dialogVisible.updateOrder.action = () => {}
        } else {
          this.dialogVisible.updateOrder.title = "确认无效订单";
          this.dialogVisible.updateOrder.tips = "请选择原因：";
          this.dialogVisible.updateOrder.showTextInput = true;
          this.dialogVisible.updateOrder.action = () => {
            if (this.dialogVisible.updateOrder.reason === null) {
              r.message("请选择无效原因", "warning");
              return;
            }
            let params = new Object();
            params.orderNo = row.orderNo;
            params.deadCode = this.dialogVisible.updateOrder.reason;
          }
        }
      },
      updateOrder: function (params) {},
      cancelRea(cancelOrderNo, canlereason) {},
    },
    computed: {
      comSubFailure: function () {
        return this.subFailure[1];
      },
      comBrandName: function () {
        return this.brandinfos[1];
      },
      comModelName: function () {
        return this.brandinfos[2];
      }
    },
    mounted: function () {}
  }

</script>

<style scoped="scoped">
  /*内容容器 内边距修改值*/
  .condition-wrap {
    padding-right: 30px;
  }

  .el-select,
  .el-cascader {
    width: 100%;
  }

  #user {
    min-width: 840px;
  }

  .detail {
    padding-bottom: 20px;
  }

  .info {
    display: table;
    width: 100%;
    margin-top: 10px;
  }

  .info-title {
    display: table-cell;
    width: 80px;
    text-align: right;
    padding-right: 10px;
  }

  .info-msg {
    display: table-cell;
    margin-left: 100px;
    margin-right: auto;
  }

  .order-header {
    border-bottom: 2px solid #20A0FF;
    padding-bottom: 10px;
  }

  .baccec {
    background-color: #ECECEC;
  }

</style>
